<template>
  <div class="content">
    <header>
      <p class="title">
        申请审批授权记录
      </p>
      <div class="serach">
        <input v-model="keywords" @keyup.enter="search()" placeholder="请输入搜索内容..." type="text">
        <div class="sousuo" @click="search">
          <img src="../assets/img/sou.png" alt="">
          搜索
        </div>
      </div>
    </header>

    <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%;margin-top:34px;">

        <el-table-column
              type="selection"
              fixed
              width="55">
            </el-table-column>
          <el-table-column
                type="index"
                fixed
                width="50">
           </el-table-column>
        <el-table-column
          prop="real_name"
          label="临时访客姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="mobile"
          label="联系电话"
          width="180">
        </el-table-column>
        <el-table-column
          prop="company"
          label="单位"
          width="180">
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="申请时间"
          width="180">
        </el-table-column>
        <el-table-column
          prop="admin_name"
          label="审批人"
          width="180">
        </el-table-column>
         <el-table-column
           prop="admin_name"
           label="授权人"
           width="180">
         </el-table-column>
         <el-table-column
           prop="update_time"
           label="审批授权时间"
           width="180">
         </el-table-column>
         <el-table-column
           prop="lockname"
           label="涉及门锁"
           width="180">
         </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          background
          @current-change='current'
          @prev-click='prev'
          @next-click='next'
          :page-size='page'
          layout="prev, pager, next"
          :total="count">
        </el-pagination>
      </div>
  </div>
</template>

<script>
  import {apply_loglist} from '../js/getApi.js'
  export default{
    name:'ke_info',
    data(){
      return{
        tableData:[],
        count:0,
        page:8,
        keywords:''
      }
    },
    methods:{
      async  search(){
         const   data=await apply_loglist(this.$store.state.token,this.keywords,1,this.page);
         this.tableData=data.list;
         this.count=data.count;
       },
       current(val){
          this.getlist(val,this.page);
       },
       prev(val){
           this.getlist(val,this.page);
       },
       next(val){
           this.getlist(val,this.page);
       },
     async  getlist(page,size){
         const data=await apply_loglist(this.$store.state.token,'',page,size);
         this.tableData=data.list;
         this.count=data.count;
       }
    },
    async created() {
       this.getlist(1,this.page);
     }
  }
</script>

<style scoped>
header{
  display: flex;
  justify-content:space-between;
  align-items: center;
  height: 84px;
  color: rgba(5, 5, 5, 100);
  font-size: 16px;
  font-family: SourceHanSansSC-regular;
  border-bottom: 1px solid #F7F7F7;
}
.serach{
   margin-right:60px;
}
.serach input{
   width: 190px;
   height:30px;
   border-radius:10px 0 0 10px;
   padding-left:10px;
   border: 1px solid rgba(187, 187, 187, 100);
   float: left;
}
.sousuo{
    width: 88px;
    height:34px;
    line-height: 34px;
    background-color: rgba(26, 188, 156, 100);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 100);
    float: left;
    margin-left: -1px;
    margin-top: -1px;
    color: #fff;
    cursor: pointer;
  }
  .sousuo img{
    width: 19px;
    height: 19px;
    vertical-align:middle;
  }


.page{
 text-align: center;
 margin: 30px auto;
}
















</style>
